<template>
  <el-container class="vh" style="overflow-y:hidden">
    <el-aside class="vbox" style="width:auto;position:fixed;left:0;top:0;z-index:10000;height:100%">
      <div class="title">
        <span class="title-little">HTK</span>
        <span v-show="!isCollapse">.海淘客</span>
        <!-- <img v-show="!isCollapse" src="@/assets/images/img_3538.png"> -->
      </div>
      <div
        style="text-align:center;background:#333;color:#bbb;padding:10px 0;border-bottom:1px solid hsla(0, 0%, 100%, 0.1)"
      >常用</div>
      <el-menu
        class="vh el-menu-vertical-demo flex1"
        style="overflow-y:auto;border-right:1px solid #333"
        :collapse="isCollapse"
        background-color="#333"
        text-color="#fff"
        :default-active="activeTab"
      >
        <el-menu-item
          v-for="item in adminMenus"
          :index="item.code"
          :key="item.code"
          @mouseover.native="collapseAside"
          @mouseout.native="openAside"
          @click="selectMenu(item.code,item.resPath)"
        >
          <i
            :class="['fa','fa-'+item.icon]"
            :style="{'width':'24px','fontSize':'18px',paddingLeft:'5px'}"
          ></i>
          <!-- <i :class="item.icon"></i> -->
          <span v-if="!isCollapse" v-text="item.name"></span>
        </el-menu-item>
        <!-- <item-menu :data="resources"></item-menu> -->
      </el-menu>
    </el-aside>
    <el-container style="padding-left:65px;">
      <el-header class="custom-header" height="60px">
        <el-popover
          v-model="showMenuCon"
          placement="bottom-start"
          :visible-arrow="false"
          trigger="hover"
        >
          <div class="menu-con">
            <!-- <div class="search-con">
              <el-input placeholder="请输入关键字" prefix-icon="el-icon-search"></el-input>
            </div>-->
            <div class="menu-items">
              <div v-if="adminMenus.length>0" class="two-menu">
                <span>最近访问</span>
              </div>
              <div>
                <el-row :gutter="25">
                  <el-col :span="8" v-for="item in adminMenus" :key="item.code">
                    <div class="three-menu hbox" @click="selectMenu(item.code,item.resPath)">
                      <div class="flex1">
                        <i
                          :class="['fa','fa-'+item.icon]"
                          :style="{'width':'23px','fontSize':'14px'}"
                        ></i>
                        <span v-text="item.name"></span>
                      </div>
                      <div :class="isExistMenu(item.id) ? 'fav-show' : 'fav'">
                        <i
                          @click="saveAdminMenu($event,item.id)"
                          :class="isExistMenu(item.id) ? 'el-icon-star-on fav-show' : 'el-icon-star-off'"
                          style="font-size:16px;color:#00c1de"
                        ></i>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
              <el-row :gutter="25" style="margin-top:20px;">
                <el-col v-for="menu in resources" :key="menu.code" :span="8">
                  <div>
                    <div class="two-menu">
                      <i
                        :class="['fa','fa-'+menu.icon]"
                        :style="{'width':'23px','fontSize':'18px'}"
                      ></i>
                      <span v-text="menu.name"></span>
                    </div>
                    <div
                      v-for="item in menu.children"
                      :key="item.code"
                      class="three-menu hbox"
                      @click="selectMenu(item.code,item.resPath)"
                    >
                      <div class="flex1">
                        <i
                          :class="['fa','fa-'+item.icon]"
                          :style="{'width':'23px','fontSize':'14px'}"
                        ></i>
                        <span v-text="item.name"></span>
                      </div>
                      <div :class="isExistMenu(item.id) ? 'fav-show' : 'fav'">
                        <i
                          @click="saveAdminMenu($event,item.id)"
                          :class="isExistMenu(item.id) ? 'el-icon-star-on' : 'el-icon-star-off'"
                          style="font-size:16px;color:#00c1de"
                        ></i>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <div
            slot="reference"
            class="all-menu"
            style="color:#fff;display:inline-block;height:60px;padding:0 12px;"
          >
            <i class="el-icon-menu"></i>
            <span style="padding-left:5px;">所有菜单</span>
            <i class="el-icon-arrow-down el-icon--right"></i>
          </div>
        </el-popover>
        <div class="profile">
          <!-- <el-popover class="icon-btn" placement="bottom" width="600" trigger="hover">
            <div style="height:500px" class="vbox flex1">
              <message-com :showToolbar="false" :optionBtns="[]"></message-com>
            </div>
            <el-badge slot="reference" style="line-height:normal">
              <el-button type="primary" icon="el-icon-message"></el-button>
            </el-badge>
          </el-popover>-->
          <span style="color:#f9f9f9;padding-right:10px;" v-text="loginAdmin.username"></span>
          <el-dropdown style="line-height:normal" @command="handleCommand">
            <span class="el-dropdown-link">
              <i :class="['fa','fa-user']" style="font-size:20px;color:#bbb"></i>
              <i class="el-icon-arrow-down el-icon--right" style="color:#bbb"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-info" command="updatePwd">修改密码</el-dropdown-item>
              <el-dropdown-item icon="el-icon-setting" command="loginout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <el-main class="main vbox" style="padding:0;background:#fff;display:flex">
        <tab-nav ref="tabNav"></tab-nav>
      </el-main>
    </el-container>
    <el-dialog title="修改密码" center width="18%" :visible.sync="showUpdatePwd">
      <el-form ref="pwdForm" :rules="rules" :model="admin" label-width="80px">
        <el-form-item label="旧密码" prop="oldPwd">
          <el-input v-model="admin.oldPwd" placeholder="请输入旧密码" show-password></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="password">
          <el-input v-model="admin.password" placeholder="请输入新密码" show-password></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="surePwd">
          <el-input v-model="admin.surePwd" placeholder="再次输入新密码" show-password></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="updatePwd">确认修改</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-container>
</template>

<script>
// @ is an alias to /src
import TabNav from "@/components/TabNav.vue";
import ItemMenu from "@/components/ItemMenu.vue";
import MessageCom from "@/views/htk/message/msg.vue";

export default {
  name: "home",
  components: {
    TabNav,
    ItemMenu,
    MessageCom
  },
  created() {
    // this.resources = this.$store.state.resTreeList;
    this.loadCollectMenu();
    this.loadResTreeList();
    // this.resList = this.$store.state.resList;
  },
  mounted() {
    this.$refs["tabNav"].addTab("index", {
      name: "我的工作台",
      code: "index",
      closeable: false,
      resPath: "Index"
    });
  },
  data() {
    let me = this;
    return {
      showMenuCon: false,
      showUpdatePwd: false,
      curComponent: null,
      resources: [],
      resList: [],
      adminMenus: [],
      admin: {
        id: me.$store.state.admin.id,
        oldPwd: "",
        password: "",
        surePwd: ""
      },
      rules: {
        oldPwd: [
          {
            required: true,
            message: "请输入旧密码",
            trigger: "change,blur"
          }
        ],
        password: [
          {
            required: true,
            message: "请输入新密码",
            trigger: "change,blur"
          }
        ],
        surePwd: [
          {
            required: true,
            message: "请再次输入新密码",
            trigger: "change,blur"
          }
        ]
      }
    };
  },
  computed: {
    activeTab() {
      return this.$store.state.activeTab;
    },
    isCollapse() {
      return this.$store.state.isCollapse;
    },
    loginAdmin() {
      return this.$store.state.admin;
    }
  },
  watch: {
    isCollapse(v) {
      if (!v) {
        this.showMenuCon = false;
      }
    }
  },
  methods: {
    updatePwd() {
      let me = this;
      me.$refs["pwdForm"].validate(valid => {
        if (valid) {
          me.$http.ajax({
            url: "admin/updatePwd",
            data: me.admin,
            success: res => {
              me.$message.success("修改成功，请重新登录");
              setTimeout(() => {
                me.$router.push({ name: "login" });
              }, 1500);
            }
          });
        }
      });
    },
    handleCommand(command) {
      if (command == "loginout") {
        this.$store.commit("clearLoginInfo");
        this.$router.push({ name: "login" });
      } else if (command == "updatePwd") {
        this.showUpdatePwd = true;
        this.$nextTick(() => {
          this.$refs.pwdForm.resetFields();
        });
      }
    },
    collapseAside() {
      this.showMenuCon = false;
      this.$store.commit("setCollapse", false);
    },
    openAside() {
      this.showMenuCon = false;
      this.$store.commit("setCollapse", true);
    },
    collapse() {
      this.$store.commit("setCollapse", !this.isCollapse);
    },
    selectMenu(index, resPath) {
      if (index == "all") {
        return;
      }
      let me = this;
      me.showMenuCon = false;
      if (!resPath) {
        me.$message.warning("未配置菜单路径，请管理员确认");
        return;
      }
      let findRes = me.resList.find(item => {
        return item.code == index;
      });
      findRes.closeable = true;
      me.$refs["tabNav"].addTab(index, findRes);
    },
    loadResTreeList() {
      let me = this;
      me.$http.ajax({
        url: "admin/getResTreeByAdminId/" + me.$store.state.admin.id,
        success: res => {
          console.log(res);
          me.resources = res.resTreeList[0].children;
          me.resList = res.resList;
          me.$store.commit("syncRes", res);
        }
      });
    },
    isExistMenu(menuId) {
      let me = this;
      let findMenu = me.adminMenus.find(item => {
        return item.id == menuId;
      });
      return !findMenu ? false : true;
    },
    loadCollectMenu() {
      let me = this;
      me.$http.ajax({
        url: "adminMenu/getCollectMenuByAdminId/" + me.$store.state.admin.id,
        success: res => {
          me.adminMenus = res;
        }
      });
    },
    saveAdminMenu(e, menuId) {
      e.stopPropagation();
      let me = this;
      me.$http.ajax({
        url: "adminMenu/onSave",
        data: {
          adminId: me.$store.state.admin.id,
          menuId: menuId
        },
        success: res => {
          console.log(res);
          me.loadCollectMenu();
        }
      });
    }
  }
};
</script>
<style>
/* .el-menu-vertical-demo {
  border-right: 1px solid #383e4b;
} */
.icon-btn {
  margin-right: 20px;
  display: inline-block;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 220px;
}
.custom-header {
  background: #262626;
  padding: 0 15px;
  position: relative;
  /* box-shadow: 0 1px 2px rgba(150, 150, 150, 0.3); */
  line-height: 60px;
  border-bottom: 1px solid hsla(0, 0%, 100%, 0.1);
}
.custom-header .profile {
  position: absolute;
  right: 10px;
  top: 0;
  display: inline-block;
}
.title {
  height: 60px;
  background: #262626;
  text-align: left;
  color: #fff;
  line-height: 60px;
  border-bottom: 1px solid hsla(0, 0%, 100%, 0.1);
  border-right: 1px solid hsla(0, 0%, 100%, 0.1);
}
.title-little {
  font-size: 22px;
  color: #fff;
  padding-left: 10px;
}
.main .el-tabs__content {
  height: 100%;
}
.title img {
  width: 200px;
}
.menu-con {
  width: 600px;
  padding: 5px 25px 25px 25px;
}
.menu-items {
  padding-top: 25px;
}
.two-menu {
  color: #000;
  font-size: 14px;
  font-weight: bold;
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
}
.three-menu {
  font-size: 12px;
  height: 35px;
  line-height: 35px;
  cursor: pointer;
  padding: 0 10px;
}
.three-menu:hover {
  background: #e5e5e5;
}

.three-menu:hover .fav {
  display: inline-block;
}
.fav {
  display: none;
}
.fav-show {
  display: inline-block;
}
.all-menu:hover {
  background: #333;
}
</style>
